﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>示例10-1</title>
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="js/jquery-1.12.4.js"></script>
    <script language="javascript">
        $(function() {
            // var m = 0;
            // $(".btn").click(function() {
            //     // fast:200ms,normal:400ms,slow:600ms,
            //     if (m % 2 == 0) {
            //         // $("p").show("fast"); //直接显示
            //         // $("p").fadeIn(1000); //淡入
            //         // $("p").fadeTo(1000, 0.2); //直接显示
            //         $("p").slideDown("normal"); // 下滑显示
            //     } else {
            //         // $("p").hide(); //直接隐藏
            //         // $("p").fadeOut("slow"); //淡出
            //         $("p").slideUp("normal"); // 上滑隐藏
            //     }
            //     m++;
            // });

            // 显示隐藏一体化
            $(".btn").click(function() {
                $("p").toggle(1000);
            });
        });
    </script>
</head>

<body>
    <input type="button" class="btn" value="单击我">
    <p>大家好</p>
</body>

</html>